<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
        <meta name="author" content="Irony">
        <meta name="repo" content="https://github.com/892768447/PasteCode">
        <meta name="description" content="Paste Your Code And Share">
        <link rel="shortcut icon" href="favicon.ico">
        <!--<link rel="stylesheet" href="//fonts.cat.net/css?family=Roboto:300,400,500,700,400italic|Material+Icons">-->
        <link rel="stylesheet" href="css/font.css" />
        <link rel="stylesheet" media="screen,projection" href="css/materialize.min.css">
        <link rel="stylesheet" href="css/vs.css" />
        <link rel="stylesheet" href="css/app.css" />
        <title>Paste Code</title>
    </head>

    <body>
        <header id="header" class="navbar-fixed">
            <nav class="nav-wrappe teal">
                <div class="nav-wrapper with-search-expandable">
                    <a href="/" class="brand-logo waves-effect waves-light">
                        <i class="material-icons">code</i>{{title}}
                    </a>
                    <a href="https://github.com/892768447/PasteCode" class="right" style="margin-right: 10px;" target="_blank">
                        <i class="material-icons">description</i>&nbsp;
                    </a>
                    <form v-on:submit.prevent="onSearch" id="search_form" class="nav-search-form right">
                        <div class="input-field search-expandable">
                            <input id="word" name="word" type="search" v-model.trim="word" autocomplete="off" disableautocomplete>
                            <label class="label-icon" for="search">
                                <i class="material-icons">search</i>
                            </label>
                            <i class="material-icons close-button">close</i>
                        </div>
                    </form>
                </div>
            </nav>
        </header>
        <div class="progress">
            <div class="indeterminate"></div>
        </div>
        <main id="main">
            <div class="nav-content">
                <div id="add_content" class="col s12">
                    <div class="row">
                        <form id="new_form" class="col s12">
                            <div class="row">
                                <div class="input-field col s6">
                                    <input id="title" name="title" type="text" class="validate" length="10" v-model.trim="title" required>
                                    <label for="title" data-error="请填写标题" data-success="正确">标题</label>
                                </div>
                                <div class="input-field col s6">
                                    <input id="nick" name="nick" type="text" class="validate" length="10" v-model.trim="nick" required>
                                    <label for="nick" data-error="请填写昵称" data-success="正确">昵称</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12">
                                    <select id="language" name="language">
                                        <option v-bind:value="value" v-for="value in languages">{{value}}</option>
                                    </select>
                                    <label for="language">类型</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="content" name="content" class="materialize-textarea validate" v-model.trim="content">
                                    </textarea>
                                    <label for="content" data-error="请填写内容" data-success="正确">文本域</label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="input-field col s12">
                                    <div class="col s6 center">
                                        <button class="btn waves-effect waves-light" type="reset" name="action">重置
                                            <i class="material-icons right">replay</i>
                                        </button>
                                    </div>
                                    <div class="col s6 center">
                                        <button v-on:click="onAddCode" class="btn waves-effect waves-light" type="button" name="action">提交
                                            <i class="material-icons right">send</i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="view_history" class="col s12" v-scroll="onLoadMore">
                    <div class="row" v-for="rows in items">
                        <div class="item-panel col s12 m6 l3" v-for="row in rows">
                            <div class="card hoverable small" v-on:click="onGetById(row.id)">
                                <div class="card-content">
                                    <span class="card-title">{{row.title}} - By: {{row.nick}}</span>
                                    <p>{{row.content}}</p>
                                </div>
                                <div class="card-action">
                                    <a href="javascript:;" class="teal-text">{{row.language}}</a>
                                    <a href="javascript:;" class="right teal-text">{{row.time}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="view_detail" class="col s12">
                    <p>{{url}}</p>
                    <pre>
                        <code id="view_code_detail" v-bind:class="lang">{{detail}}</code>
                    </pre>
                </div>
            </div>
            <div id="view_notice" class="modal">
                <div class="modal-content">
                    <h4>提示</h4>
                    <p id="view_notice_msg"></p>
                </div>
                <div class="modal-footer">
                    <a href="javascript:;" class=" modal-action modal-close waves-effect waves-green btn-flat">知道了</a>
                </div>
            </div>
            <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
                <a class="btn-floating waves-effect waves-light btn-large teal" href="javascript:scroll(0,0);">
                    <i class="material-icons">navigation</i>
                </a>
            </div>
        </main>
        <footer id="footer" class="page-footer teal">
            <div class="nav-wrapper">
                <ul class="tabs tabs-transparent tabs-fixed-width">
                    <li class="tab">
                        <a href="#add_content">新增内容</a>
                    </li>
                    <li class="tab">
                        <a class="active" href="#view_history">历史记录</a>
                    </li>
                    <li class="tab">
                        <a href="#view_detail">内容详情</a>
                    </li>
                </ul>
            </div>
        </footer>
        <!-- Scripts-->
        <script type="text/javascript" src="js/jquery.min.js">
        </script>
        <script type="text/javascript" src="js//vue.min.js">
        </script>
        <script type="text/javascript" src="js/materialize.min.js">
        </script>
        <!--<script type="text/javascript" src="js/materialize-pagination.js"></script>-->
        <!--<script type="text/javascript" src="js/canvas-nest.min.js" color="0,150,136"
        opacity="0.5" count="60" id="nest"></script>-->
        <script async type="text/javascript" src="js/love.js">
        </script>
        <script type="text/javascript" src="js/highlight.pack.js"></script>
        <script type="text/javascript" src="js/app.min.js">
        </script>
        <script>
            var _hmt = _hmt || [];
            (function() {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?8ad19db84a74ef8d08351a3673234736";
              var s = document.getElementsByTagName("script")[0]; 
              s.parentNode.insertBefore(hm, s);
            })();
        </script>
    </body>

</html>